<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-26 19:45:39
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-02 10:51:48
 * @FilePath: \Civil_Servant_Performance_PC\src\views\work-approval\negative\civil\index.vue
-->
<template>
  <div class="">
    <el-row>
      <el-col>
        <el-select v-model="queryParams.year" placeholder="选择年份" @change="handleYearChange">
          <el-option v-for="item in dict.type.biz_work_year_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="queryParams.quarter" placeholder="选择季度" class="ml-10" @change="handleQuarterChange">
          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="text-banner">
      <span>负面清单</span>
      <el-button class="ml-10" size="mini" type="primary" circle icon="el-icon-refresh" plain @click="handleRefresh" />
    </div>
    <!-- 上传提示 -->
    <div class="el-upload__tip">
      <p>
        <b style="color: #f56c6c">*依据材料：</b>大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> 格式为
        <b style="color: #f56c6c">{{ fileType.join('/') }}</b
        >的文件（不超过<b style="color: #f56c6c">{{ limit }}</b
        >项）
      </p>
    </div>
    <el-table :data="negativeList" border style="width: 100%" v-loading="loading">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负面产生日期" prop="matterDate" width="160" align="center">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.matterDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="负面评价类型" prop="matterTypeDict" width="160" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.matterTypeDict" placeholder="负面评价类型">
            <el-option v-for="item in dict.type.biz_personal_punishment_type" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="说明描述" prop="content" min-width="180" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.content"
            type="textarea"
            placeholder="输入说明描述"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 5 }"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="扣分" prop="score" width="130" align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.score" placeholder="扣分" controls-position="right" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="受影响站办所" prop="sufferDeptId" min-width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sufferDeptName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负面评价对象" prop="sufferCivilServantId" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleSelectPersonage(scope.$index, 'party')">{{
            scope.row.sufferCivilServantName || '选择负面评价对象'
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="提供站办所" prop="provideDeptId" min-width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.provideDeptName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提供人" prop="provideCivilServantId" min-width="180" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleSelectPersonage(scope.$index, 'informer')">{{
            scope.row.provideCivilServantName || '选择提供人'
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="依据材料" align="center" min-width="120">
        <template slot-scope="scope">
          <FileUpload v-model="scope.row.materialUrls" :isShowTip="false" :fileType="fileType"></FileUpload>
        </template>
      </el-table-column>

      <el-table-column label="填报日期" prop="materialProvisionDate" width="160" align="center">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.materialProvisionDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleSubmit(scope.row)">提交</el-button>
          <el-button type="text" size="mini" @click="handleRemove(scope.row, scope.$index)" v-if="scope.$index !== 0">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <CheckCivilServant :visible.sync="checkCivilVisible" @success="emitCheckCivil"></CheckCivilServant>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload'
import { list, add, update, remove } from '@/api/work-approval/negative/civil'
import { quarterFormat } from '@/utils/quarter.js'
import CheckCivilServant from '../components/CheckCivilServant.vue'
import dayjs from 'dayjs'
export default {
  name: 'negative-civil',
  dicts: ['biz_work_year_list', 'biz_personal_punishment_type'],
  props: {},
  components: { FileUpload, CheckCivilServant },
  data() {
    return {
      checkCivilVisible: false,
      personageType: '',
      personageIndex: '',
      limit: 5,
      fileSize: 5,
      fileType: ['docx', 'xlsx', 'ppt', 'pdf', 'png', 'jpg'],

      loading: false,
      negativeList: [],
      negativeItem: {
        id: undefined,
        matterDate: undefined,
        matterTypeDict: undefined,
        content: undefined,
        score: 0,
        materialUrls: undefined,
        materialProvisionDate: dayjs().format('YYYY-MM-DD'),
        provideDeptId: undefined,
        provideDeptName: undefined,
        provideCivilServantId: undefined,
        provideCivilServantName: undefined,
        sufferDeptId: undefined,
        sufferDeptName: undefined,
        sufferCivilServantId: undefined,
        sufferCivilServantName: undefined,
        matterTypeDict: undefined
      },
      negativeMapping: {
        matterDate: '负面产生日期',
        content: '说明描述',
        sufferDeptId: '负面评价对象',
        sufferCivilServantId: '影响站办所',
        matterTypeDict: '负面评价类型'
      },
      quarterOptions: [],
      queryParams: {
        year: '',
        quarter: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.handleYearChange(new Date().getFullYear())
  },
  methods: {
    emitCheckCivil(selection) {
      let { id, name, deptId, deptName } = selection
      if (this.personageType === 'party') {
        let formatItem = { ...this.negativeList[this.personageIndex] }
        formatItem.sufferDeptId = deptId
        formatItem.sufferDeptName = deptName
        formatItem.sufferCivilServantId = id
        formatItem.sufferCivilServantName = name
        this.$set(this.negativeList, this.personageIndex, { ...formatItem })
      } else if (this.personageType === 'informer') {
        let formatItem = { ...this.negativeList[this.personageIndex] }
        formatItem.provideDeptId = deptId
        formatItem.provideDeptName = deptName
        formatItem.provideCivilServantId = id
        formatItem.provideCivilServantName = name
        this.$set(this.negativeList, this.personageIndex, { ...formatItem })
      }
    },
    handleSelectPersonage(index, type) {
      this.personageIndex = index
      this.personageType = type
      this.checkCivilVisible = true
    },
    handleRemove(raw, index) {
      this.$confirm(`您正在删除序号为【${index + 1}】的数据，数据删除后将无法找回，请确认删除`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            const loading = this.$loading({
              target: '.el-message-box',
              lock: true,
              text: '正在删除...',
              spinner: 'el-icon-loading',
              background: 'rgba(255,255,255,0.6)'
            })
            remove({ id: raw.id })
              .then(() => {
                loading.close()
                this.handleRefresh()
                this.$modal.msgSuccess('已删除')
                done()
              })
              .catch(() => {
                loading.close()
                done()
              })
          } else {
            done()
          }
        }
      })
    },
    handleSubmit(raw) {
      let mapping = Object.keys(this.negativeMapping)
      for (let key of mapping) {
        if (!raw[key] && raw[key] !== 0) {
          this.$modal.msgError(`操作失败，【${this.negativeMapping[key]}】 不能为空！`)
          return
        }
      }
      let mustItem = {}
      for (let key of Object.keys(this.negativeItem)) {
        mustItem[key] = raw[key]
      }
      let params = { ...this.queryParams, ...mustItem }
      if (raw.id) {
        update(params).then(res => {
          this.$modal.msgSuccess('已提交')
          this.handleRefresh()
        })
      } else {
        add(params).then(res => {
          this.$modal.msgSuccess('已提交')
          this.handleRefresh()
        })
      }
    },
    handleRefresh() {
      this.getList()
    },
    // 年度选择
    handleYearChange(year) {
      this.queryParams.year = year
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
      this.handleQuarterChange(quarter)
    },
    // 季度选择
    handleQuarterChange(quarter) {
      this.queryParams.quarter = quarter
      this.getList()
    },
    getList() {
      this.loading = true
      list(this.queryParams)
        .then(res => {
          this.loading = false
          this.negativeList = res.data
          this.negativeList.unshift(JSON.parse(JSON.stringify(this.negativeItem)))
        })
        .catch(err => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
